<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./imgs/favicon.png" type="image/x-icon">
    <link rel="preload" href="./css/common.css" as="style">
    <link rel="preload" href="./js/vue.js" as="script">
    <link rel="preload" href="./components/header.js" as="script">
    <link rel="preload" href="./components/nav.js" as="script">
    <link rel="preload" href="./components/newsBox.js" as="script">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Family Health</title>
</head>

<body>
    <div id="app" v-cloak>

        <share></share>

        <popup v-model="showSide">
            <side-nav></side-nav>
        </popup>

        <div class="load" v-if="loading">
            <img src="./imgs/loading.svg" alt="load">
        </div>

        <div class="container" v-else>

            <side-header @menu-click="handleOpenSideBar">
                <side-nav></side-nav>
            </side-header>

            <div class="container-main">
                <div class="main">
                    <div class="main-top">
                        <div class="main-top-left">
                            <news-box type="hot" :options="hot" :key="hot.id"></news-box>
                        </div>
                        <div class="main-top-right">
                            <news-box type="simple" v-for="item in simple" :key="item.id" :options="item"></news-box>
                        </div>
                    </div>
                    <div class="main-bottom">
                        <ul>
                            <li v-for="item in long">
                                <news-box :options="item" :key="item.id"></news-box>
                            </li>
                        </ul>
                    </div>
                </div>

                <aside class="aside"></aside>
            </div>

        </div>

        <side-footer v-if="!loading"></side-footer>

        <cookies></cookies>
    </div>
</body>
<script src="./main.js"></script>
<script src="./mixins/index.js"></script>
<script src="./components/header.js"></script>
<script src="./components/footer.js"></script>
<script src="./components/popup.js"></script>
<script src="./components/nav.js"></script>
<script src="./components/share.js"></script>

<script src="./components/newsBox.js"></script>
<script src="./components/cookies.js"></script>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        mixins: [mixin],
        components: {
            SideHeader: header,
            SideFooter: footer,
            SideNav: nav,
            Popup: popup,
            newsBox: news,
            cookies: cookies,
            share: share
        },
        data() {
            return {
                hot: {},
                simple: [],
                long: []
            }
        },
        created() {
            this.handleFetchArticle()
        },
        methods: {
            handleFetchArticle() {
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 50,
                        siteId,
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.hot = res.data.splice(0, 1)[0]
                            this.simple = res.data.splice(0, 4)
                            this.long = res.data
                        }
                        this.handleLoadingEnd()
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            },
            fetchCategories() {
                fetch('https://migame.vip/gamefront/blog/blogTypeApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 20
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            // this.fetchCategoriesData = res.data
                        }
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            }
        }
    })
</script>

</html>